import { RowData } from "naive-ui/es/data-table/src/interface";
import { computed, h, reactive, ref } from "vue";
import { NButton, NSpace, NTag } from "naive-ui";
import { Layer } from "slash-layer";
import form from "./SysResourceElmUpdate.vue";
import httpApi from "../httpApi";

export const queryForm = ref<any>({});
export const tableRef = ref<any>();

/**
 * 选中的数据
 */
export const checkedRows = ref<any>([]);

/**
 * 选中行
 * @param rows
 */
export async function onCheckedRowEvent(rows: any[]) {
  checkedRows.value = rows;
}

export function reloadTable() {
  if (tableRef.value) {
    tableRef.value.reload();
  }
}

/**
 * 枚举字段
 */
export const enabledTextEnum = reactive(
  {
    1: {
      text: "启用",
      style: "info"
    },
    0: {
      text: "禁用",
      style: "error"
    }
  }
);
export const getEnabledTextEnum = (key: number | string) => {
  return enabledTextEnum[key].text || `--`;
};

export const getEnabledStyleEnum = (key: number | string) => {
  return enabledTextEnum[key].style || `--`;
};
export const enabledOptions = computed(() => {
  const temp: any = [];
  Object.keys(enabledTextEnum).forEach(function(key: any) {
    temp.push({
      value: parseInt(key),
      label: enabledTextEnum[key].text
    });
  });
  return temp.reverse();
});

/**
 * 更新弹框
 * @param row
 */
export async function doUpdateModal(row: Recordable) {
  if (checkedRows.value.length != 1 && !row) {
    Layer.error("请选择数据条目后操作");
    return;
  }
  if (!row) {
    row = {
      id: checkedRows.value[0]
    };
  }
  await Layer.updateForm({
    title: "编辑功能",
    content: {
      component: form,
      props: { ...row }
    }
  } as any);
  await reloadTable();
}

/**
 * 新增
 * @param row
 */
export async function doSaveModal(row: Recordable) {
  console.log("传递的数据:{}", row);
  const data = { ...queryForm.value, ...row };
  if (!data.fkParentId) {
    Layer.error("请至少选择一个归属菜单");
    return;
  }
  await Layer.createForm({
    title: "新增功能",
    content: {
      component: form,
      props: {
        ...data
      }
    }
  } as any);
  await reloadTable();
}

/**
 * 删除
 * @param row
 */
export async function doDeleteModal(row: Recordable) {
  const ids = [...checkedRows.value];
  if (row) {
    ids.push(row.id);
  }

  if (ids.length == 0) {
    Layer.error("请选择要删除的数据条目");
    return;
  }
  await Layer.confirm("您确定删除选中记录么");
  await httpApi.doLogicDeleteSysTbResource(ids);
  await reloadTable();
}

/**
 * 查看表单
 * @param row
 */
export async function doReadModal(row: Recordable) {
  if (checkedRows.value.length != 1 && !row) {
    Layer.error("请选择数据条目后操作");
    return;
  }
  if (!row) {
    row = {
      id: checkedRows.value[0]
    };
  }
  await Layer.readForm({
    title: "编辑功能",
    content: {
      component: form,
      props: { ...row }
    }
  } as any);
}

/**
 * 功能列表
 */
export const tableColumns = [
  {
    title: "选中",
    key: "id",
    type: "selection",
    fixed: "left",
    width: 50,
    disabled(row: RowData) {
      return row.name === "Edward King 3";
    }
  },
  {
    title: "功能名称",
    key: "resourceName",
    sorter: "resourceName",
    width: 150
  },
  {
    title: "资源编码",
    key: "resourceCode",
    sorter: "resourceCode",
    width: 150,
    // auth: ["basic_list"], // 同时根据权限控制是否显示
    ifShow: (_column) => {
      return true; // 根据业务控制是否显示
    }
  },
  {
    title: "更新时间",
    key: "updateTime",
    width: 160,
    sorter: "updateTime"
  },
  {
    title: "资源描述",
    key: "resourceDescription",
    width: 160,
    sorter: "resourceDescription"
  },
  {
    title: "创建时间",
    key: "createTime",
    width: 160,
    sorter: "createTime"
  },
  {
    title: "状态",
    key: "enabled",
    width: 60,
    sorter: "enabled",
    render(row: RowData) {
      console.log(111);
      return h(NTag, {
        type: getEnabledStyleEnum(row.enabled)
      }, getEnabledTextEnum(row.enabled));
    }
  },
  {
    title: "操作",
    key: "id",
    type: "id",
    width: 160,
    render(row: RowData) {
      return h(NSpace, [
        h(NButton, {
          type: "primary",
          text: true,
          onClick: (async (row: RowData) => {
            await doUpdateModal(row);
          }).bind(null, row)
        }, "编辑"),
        h(NButton, {
          type: "primary",
          text: true,
          onClick: (async (row: RowData) => {
            await doDeleteModal(row);
          }).bind(null, row)
        }, "删除")
      ]);
    }
  }
];

/**
 * 新增和更新校验规则
 */
export const formRules = reactive({
  resourceName: [
    { required: true, message: "请输入功能名称", trigger: "blur" }
  ]
});
